import { Dialog, DialogTitle, DialogContent, TextField, Button, Select, MenuItem } from '@mui/material';
import { styled } from '@mui/material/styles';

// 自定义样式组件
const StyledDialog = styled(Dialog)({
    '& .MuiPaper-root': {
        borderRadius: 0, // 去掉模态弹窗的圆角
    },
});

const StyledButton = styled(Button)({
    backgroundColor: 'rgba(35, 127, 250, 1)', // 更改按钮颜色
    borderRadius: 0, // 去掉按钮的圆角
    '&:hover, &:active, &:focus': { // 添加悬停、激活和聚焦状态的颜色保持一致
        backgroundColor: 'rgba(35, 127, 250, 1)',
    },
});

const CreateProjectDialog = ({ open, onClose }) => {
    const [projectName, setProjectName] = useState('');
    const [description, setDescription] = useState('');
    const [reuseModelConfig, setReuseModelConfig] = useState('');

    const handleSubmit = async () => {
        if (!projectName || !description) {
            alert('项目名称和描述为必填项');
            return;
        }

        try {
            console.log('Creating project:', { projectName, description, reuseModelConfig });
            onClose();
        } catch (error) {
            console.error('Error creating project:', error);
        }
    };

    return (
        <StyledDialog open={open} onClose={onClose}>
            <DialogTitle>创建新项目</DialogTitle>
            <DialogContent>
                {/* 项目名称 */}
                <div style={{ display: 'flex', flexDirection: 'column' }}>
                    <label style={{ marginBottom: '8px' }}>项目名称 *</label>
                    <TextField
                        required
                        fullWidth
                        margin="normal"
                        value={projectName}
                        onChange={(e) => setProjectName(e.target.value)}
                    />
                </div>

                {/* 描述 */}
                <div style={{ display: 'flex', flexDirection: 'column' }}>
                    <label style={{ marginBottom: '8px' }}>描述 *</label>
                    <TextField
                        required
                        fullWidth
                        multiline
                        rows={4}
                        margin="normal"
                        value={description}
                        onChange={(e) => setDescription(e.target.value)}
                        helperText={`${description.length}/300`}
                        inputProps={{ maxLength: 300 }}
                    />
                </div>

                {/* 复用模型配置 */}
                <Select
                    label="复用模型配置"
                    fullWidth
                    margin="normal"
                    value={reuseModelConfig}
                    onChange={(e) => setReuseModelConfig(e.target.value)}
                >
                    <MenuItem value="">请选择</MenuItem>
                </Select>
            </DialogContent>
            <Box sx={{ display: 'flex', justifyContent: 'flex-end', p: 2 }}>
                <StyledButton onClick={onClose}>取消</StyledButton>
                <StyledButton variant="contained" onClick={handleSubmit} sx={{ ml: 2 }}>创建项目</StyledButton>
            </Box>
        </StyledDialog>
    );
};

export default CreateProjectDialog;